<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common :: common">
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<style type="text/css">
    .userpic-myInfo{
        width:60px;
        height:60px;
        border-radius:60px;
        -webkit-border-radius:60px;
        -moz-border-radius:60px;
        border:2px solid #fff;
        box-shadow:0 0 4px #ccc;
        overflow:hidden;
    }
    .el-icon-arrow-right{

    }
</style>
<body>
<div id="app">
    <!--顶部--->
    <mt-header title="我的信息" style="background: linear-gradient(to bottom, #55a160 ,#01603e);">
        <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <!--中间-->
    <mt-tab-container v-model="active">
        <!--服务领取-->
        <mt-tab-container-item id="tab-container1">
            <mt-cell title="车牌号码">川A200F4</mt-cell>
            <mt-cell title="手机号码">16602839457</mt-cell>
            <mt-cell title="领取服务" is-link label="你可以领取的服务" :to="ResUrl">
                <span style="color: green">领取</span>
            </mt-cell>
        </mt-tab-container-item>
        <!--我的信息-->
        <mt-tab-container-item id="tab-container2">
            <div style="width: 100%;background: linear-gradient(to bottom, #55a160 ,#01603e);">
                <div  style="height:1rem;margin-right:15px;width:100%;text-align: right" @click="goHref('${request.contextPath}/modules/weixin/install.html')"><div style="position: relative;top: 50%;left: 50%;transform: translate(-50%,-50%);margin-right: 40px"><yd-icon name="setting" size="20px" color="#ffffff" ></yd-icon></div></div>
                <div style="padding:15px 25px 0 25px;justify-content: space-between;display:-webkit-flex; display:flex;">
                    <div style="color: white;">
                        <div style="font-size: larger;line-height: 40px">{{user.name}}</div>
                        <div style="font-size: smaller;line-height: 25px">车牌号码：{{user.plateNo}}</div>
                        <div style="font-size: smaller;line-height: 25px">电话号码：{{user.mobile}}</div>
                    </div>
                    <div style="display: flex">
                        <div class="userpic-myInfo" style="margin-top: 15px"><img  th:src="@{/images/info.png}" width="100%" height="100%"> </div>
                        <i class="el-icon-arrow-right" style="line-height: 90px;color:white;"></i>
                    </div>
                </div>
                <div style="padding: 20px 0;display: flex;font-size: smaller;color: white">
                    <div style="margin-left: 25px">未领取：0个</div>
                </div>
            </div>
            <div style="height: 8px"></div>
            <div>
                <div style="background: #FFFFFF;padding-top: 10px">
                    <div style="display: flex;flex-wrap:wrap" >

                        <div style="width: 33%;padding: 20px;text-align: center;"   @click="qcCard()">
                            <div style="margin: auto"><img  th:src="@{/images/cxzf.jpg}" style="width: 40px;height: 40px"></div>
                            <div style="font-size: 0.25rem">领取服务</div>
                        </div>
                        <div style="width: 33%;padding: 20px;text-align: center;" @click="goHref('modules/carmum/updateCarMumInfo.html')">
                            <div style="margin: auto"><img th:src="@{/images/dsh.png}" style="width: 40px;height: 40px"></div>
                            <div style="font-size: 0.25rem">信息修改</div>
                        </div>
                    </div>
                </div>
            </div>
        </mt-tab-container-item>
    </mt-tab-container>

    <!--底部-->
    <mt-tabbar v-model="selected">
        <mt-tab-item id="服务领取" @click.native="xz(0)">
            <img slot="icon" th:src="@{/images/info.png}">
            我的数据
        </mt-tab-item>
        <mt-tab-item id="我的信息" @click.native="xz(1)">
            <img slot="icon" th:src="@{/images/info.png}">
            我的信息
        </mt-tab-item>
    </mt-tabbar>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/

    console.info(ctxPath);
</script>　　
<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        data() {
            return{
                selected:'我的信息',
                active:'tab-container2',
                ResUrl:'',
                user:{
                    name:'',
                    mobile:'',
                    id:'',
                    idCard:'0',
                    plateNo:''
                }
            }
        },
        methods: {
            handleClose: function(){
                console.log("返回")
            },
            selected:function(){

            },
            xz:function(type){
                if(type == '0'){
                    this.$toast({
                        message: '功能还没有完善,敬请期待',
                        position: 'bottom',
                        duration: 2000
                    });
                    this.selected = '我的信息';
                    /*this.active = "tab-container1";*/
                }else{
                    this.active = "tab-container2";
                }
            },
            qcCard(){
                //跳转的页面
                axios.get("eJiaBao/getUrl?cphm="+this.user.plateNo+"&phone="+this.user.mobile)
                    .then(function(res){
                        window.location.href = res.data.ResUrl;
                    })
                    .catch(function(result){})
            },
            goHref(f){
                window.location.href = ctxPath+f;
            },
            getInfo(){

                axios.get("user/getInfo").
                then(function(res){
                    vm.user =  res.data.info;
                    vm.user.plateNo = res.data.info.plateNo;
                    vm.user.mobile = res.data.info.mobile;
                    vm.user.name = res.data.info.name;
                    vm.user.idCard = res.data.info.idCard;
                }).
                catch()
            }
        },
        created(){
            this.getInfo();
        }
    })
</script>
</html>